<template>
  <div class="center">
    <header>
      <van-nav-bar left-arrow @click-left="onClickLeft" right-text="⭐"/>
    </header>
    <section>
      <swiper :options="swiperOption">
        <swiper-slide>
          <img src="https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg" alt>
        </swiper-slide>
          <swiper-slide>
          <img src="https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg" alt>
        </swiper-slide>
          <swiper-slide>
          <img src="https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg" alt>
        </swiper-slide>
          <swiper-slide>
          <img src="https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg" alt>
        </swiper-slide>
          <swiper-slide>
          <img src="https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg" alt>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>

      <div class="title">
        <h2 class="top">宝宝秋冬加棉保暖套装</h2>
        <div class="price"><span>￥999</span><span>好评99%</span></div>
        <p class="vipprice">会员价：￥99</p>
      </div>
      <div class="middle">
        <p><span>设计者：CZH</span><span>材质：100%纯棉</span></p>
        <p><span>颜色：浅蓝</span><span>适龄期：3-5岁</span></p>
      </div>
      <div class="review">
        <router-link tag="p" to="/review">评论</router-link>
        <router-link tag="p" to="/buyinterface">规格</router-link>
      </div>
      <div class="criticism">
        <h4>view妈妈</h4>
        <p>宝贝韩浩，材质很好，手感也很柔软，适合宝宝穿</p>
      </div>
    </section>
    <footer>
      <router-link tag="div" to="shoppingcart">加入购物车</router-link>
      <router-link tag="div" to="buyinterface">立即购买</router-link>
    </footer>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
  name: "Productdetails",
  data() {
    return {
      swiperOption: {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        initialSlide :2,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true
        },
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass:'my-bullet-active',
        }
      },
      aaa:''
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
   
  },
  mounted() {
    let _this = this
      Axios({
        url:'http://106.12.43.71:8080/ShiGuangJi/shiguangji/jinnang.do',
      }).then(function(data){
        console.log(data.data.data)
      _this.aaa = data.data.data[1]
       console.log(_this.aaa)
      })
     
    },
};
</script>

<style scoped>
header {
  height: 45px;
}
footer {
  height: 70px;
  display: flex;
  justify-content: space-between;
}
footer div{
  width: 50%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:18px
}
footer div:nth-of-type(2){
  background: #c6c6c6
}
section {
  flex: 1;
  overflow: auto;
}
.center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.swiper-slide{
       width: 266px;
       height: 300px;
   }
   .swiper-slide img{
       width: 266px;
       height: 266px;
       border-radius: 10px
   }
.swiper-pagination >>> .my-bullet-active{
  background-color: black;
  opacity: 1;
}
.title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 12%;
}
.title .top{
  font-size: 20px;
  
}
.price{
  width: 40%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.price span{
  width: 40%;
  border-radius: 8px;
  border: 1px solid #000;
  text-align: center
}
.vipprice{
  width: 102px;
  height: 18px;
  border-radius: 9px;
  background: #ccc;
  text-align: center
}
.middle{
  width: 80%;
  height: 10%;
  border: 1px solid #000;
  margin: 20px auto;
  border-radius: 5px;
}
.middle p{
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 19px;
  box-sizing: border-box
}
.review{
  width: 80%;
  height: 5%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.review p{
  border: 1px solid #000;
  border-radius: 5px;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}
.criticism{
  width: 80%;
  margin: 20px auto;
  padding: 7px 8px;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 5px
}
</style>